<template>
  <div class="vacation">
       <div class="vacation-top">
         周末去哪儿
        </div>
        <ul class="vacation-list">
            <li class="vacation-item border-bottom" v-for="item in vacationList" :key="item.id">
                <div class="vacation-img"><img :src="item.vacationUrl" alt=""></div>
                <div class="vacation-nav">
                    <p class="vacation-name">{{item.vacationName}}</p>
                    <p class="vacation-summary">{{item.vacationsummary}}条评论</p>
                   
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['vacationList'],
    data(){
        return{
            
        }
    }
}
</script>
<style lang="stylus" scoped>
    .vacation{
       
    }
    .vacation-top{
         padding .24rem
        font-size .32rem
    }
    .vacation-item{
        margin-top .1rem
        background-color #fff
    }
    .vacation-img{
        width 100%; 
        height 0
        padding-bottom 37.4375%
        overflow hidden
    }
    .vacation-img img{
        width 100%
       
    }
    .vacation-nav{
        padding .2rem
    }
    .vacation-name{
        font-size .32rem
        font-weight bold
         
    }
    .vacation-summary{
        font-size .28rem
        color #212121
         
    }
</style>
